<script setup lang="ts">
import { ref, watch } from 'vue'
import VueOfficeDocx from '@vue-office/docx';           // 此依赖要求node版本大于18
// import VueOfficeExcel from '@vue-office/excel';
// import VueOfficePdf from '@vue-office/pdf';

// docx-preview 预览报错，vue-video-player也有问题，所以音视频预览直接用原生标签就行了
// https://view.xdocin.com/view?src=你的文档地址 ，可以预览word文件，只能是公网的在线文件

const props = defineProps<{
	visible: boolean
	type: 'pdf' | 'img' | 'video' | 'word' | 'word-office' 
	url?:string
}>()

const visible=ref(false)

watch(
	() => props.visible,
	(nv) => {
		if (nv) {
			
		}
	}
)


function setVisible(_visible:boolean){
  visible.value=_visible
}

defineEmits(['close'])

defineExpose({
 setVisible,
})
</script>

<template>
	<el-dialog v-model="visible" title="预览" width="80%" :modal="false" draggable :close-on-click-modal="false" align-center
	>
	<el-scrollbar maxHeight="85vh">
		<iframe v-if="type == 'pdf'" :src="url" frameborder="0" class="pdf"></iframe>
    <iframe v-if="type == 'word'" :src ="`https://view.xdocin.com/view?${url}`" frameborder="0" class="pdf"></iframe>
    
		<!-- 只支持预览docx，预览非线上地址会跨域，此时要做好路径处理；线上地址则不会 -->
		<vue-office-docx
					v-if="type == 'word-office'"
					:src="url" 
					@rendered="()=>{}"
					@error="()=>{}"
				/>
		<video v-if="type == 'video'" :src="url" controls ></video>
    <el-image v-if="type == 'img'" :src="url" class="image"   :preview-src-list="[url]"/>
	</el-scrollbar>
	</el-dialog>
</template>

<style scoped lang="less">
.pdf{
  min-height: 80vh;
  width: 100%;
}
</style>
